<template>
  <div class="min-h-screen bg-gray-50 flex flex-col items-center justify-center p-4">
    <!-- 页面标题 -->
    <h1 class="text-[clamp(2rem,5vw,3.5rem)] font-bold text-gray-800 mb-4">
      <span class="text-primary">功能</span>开发中
    </h1>
    
    <!-- 装饰图形 -->
    <div class="relative w-48 h-48 mb-8">
      <div class="absolute inset-0 rounded-full bg-primary/10 animate-pulse"></div>
      <div class="absolute inset-4 rounded-full bg-primary/20 animate-pulse" style="animation-delay: 0.2s"></div>
      <div class="absolute inset-8 rounded-full bg-primary/30 animate-pulse" style="animation-delay: 0.4s"></div>
      <div class="absolute inset-0 flex items-center justify-center">
        <i class="fa fa-cogs text-6xl text-primary animate-spin"></i>
      </div>
    </div>
    
    <!-- 提示信息 -->
    <p class="text-gray-600 text-lg md:text-xl text-center max-w-2xl mb-8">
      我们正在努力开发这个功能，很快就会和大家见面！感谢您的耐心等待!!!
    </p>
    
    <!-- 进度指示器 -->
    <!-- <div class="w-full max-w-md mb-8">
      <div class="h-2 bg-gray-200 rounded-full overflow-hidden">
        <div class="h-full bg-primary rounded-full" :style="{ width: progress + '%' }"></div>
      </div>
      <p class="text-sm text-gray-500 mt-2 text-right">
        已完成: {{ progress }}%
      </p>
    </div> -->
    
    <!-- 返回按钮 -->
    <!-- <router-link to="/" class="px-6 py-3 bg-primary text-white rounded-lg shadow-md hover:bg-primary/90 transition-all duration-300 flex items-center">
      <i class="fa fa-arrow-left mr-2"></i> 返回首页
    </router-link> -->
  </div>
</template>

<script lang="ts" setup>
import {ref, reactive, computed} from 'vue';
import {usePaging} from '@/hooks/usePaging';
import {
  apiTencentAdCreativityList,
  apiTencentAdCreativityAdd,
  apiTencentAdCreativityEdit,
  apiTencentAdCreativityCopy,
  apiGetAdCreatives,
  apiGetLandingPages,
  apiGetAccounts,
  apiGetBrands
} from '@/api/tencent_ad_creativity';
import {
  ElLoading,
  ElMessage,
  ElMessageBox,
  type ElMessageBoxOptions,
  ElNotification
} from 'element-plus'
import {timeFormat} from '@/utils/util';
import feedback from '@/utils/feedback';
import {
  apiTencentAdvertisingUserAdList24HourPlacement,
  apiTencentAdvertisingUserAdListDelete,
  apiTencentAdvertisingUserAdListLists,
  apiTencentAdvertisingUserAdListPlacementRefresh
} from '@/api/tencent_advertising_user_ad_list'
import {Plus, Delete, Picture, VideoPlay} from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'


// 模拟加载进度
const progress = ref(0)
const router = useRouter()

onMounted(() => {
//   const interval = setInterval(() => {
//     if (progress.value >= 75) {
//       clearInterval(interval)
//     } else {
//       progress.value += Math.random() * 10
//     }
//   }, 500)
})
</script>

<style scoped>
:root {
  --primary: #3B82F6; /* 蓝色主色调 */
}

/* 自定义动画 */
@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.8;
  }
}

.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
</style>  